<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--忽略页面中的邮箱格式为邮箱-->
    <meta name="format-detection" content="email=no">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="format-detection" content="telephone=no,address=no,email=no">
    <title>累计打卡记录</title>
    <link rel="stylesheet" href="../res/css/base_X.css">
    <link rel="stylesheet" href="../res/css/swipercss/swiper.min.css">
    <link rel="stylesheet" href="../res/daySignPosters-v2/css/daySignPosters.css">
</head>
<body class="iphonex">
<!--福利包-->
<div class="welfare_share">
    <div class="welfare_box">
        <div class="welfare_content">
            <img src="../res/daySignPosters-v2/images/welfare_icon.png" alt="" class="welfare_icon">
            <div class="voucher_back">
                <img src="../res/daySignPosters-v2/images/welfare_back.png" alt="" class="welfare_back">
                <div class="cord_voucher clearfix">
                    <img src="../res/daySignPosters-v2/images/cord_icon.png" alt="" class="cord_icon fl">
                    <p class="voucher_p fl">
                        二维码更换卡券
                        <span>更新二维码时使用,限当日</span>
                    </p>
                </div>
            </div>
            <p class="voucher_txt">恭喜您完成<span>连续7天</span>打卡任务，<br>
                获得一张二维码更换卡，该福利 <br>
                一天有效，千万别错过哦。
            </p>
            <img src="../res/daySignPosters-v2/images/welfare_btn.png" alt="" class="welfare_btn">
        </div>
        <img src="../res/daySignPosters-v2/images/closed.png" alt="" class="closed">
    </div>
</div>
<div class="warp">
    <div class="accpuncard_page">
        <!--顶部-->
        <div class="daysign_top clearfix">
            <div class="top_left fl">
                <div class="left_title clearfix">
                    <h3 class="left_title_h3 fl">累计打卡5天</h3>
                    <img src="../res/daySignPosters-v2/images/blueicon.png" alt="" class="fl blueicon">
                </div>
                <p class="date_text date_num"></p>
            </div>
            <div class="top_right fr">
                <img src="../res/daySignPosters-v2/images/calendar_icon.png" alt="" class="calendar_icon">
                <p class="calendar_p">打卡记录</p>
            </div>
        </div>
        <!--中间滑动图片-->
        <div class="swiper-container preview_swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide slide_s">
                    <img src="../res/images/poster/poster1.png" alt="宣品缩略图" class="scroll_img">
                    <img src="../res/daySignPosters-v2/images/generate_icon.png" alt="" class="generate_icon">
                </div>
                <div class="swiper-slide slide_s">
                    <img src="../res/images/poster/poster2.png" alt="宣品缩略图" class="scroll_img">
                    <img src="../res/daySignPosters-v2/images/generate_icon.png" alt="" class="generate_icon">
                </div>
                <div class="swiper-slide slide_s">
                    <img src="../res/images/poster/poster3.png" alt="宣品缩略图" class="scroll_img">
                    <img src="../res/daySignPosters-v2/images/generate_icon.png" alt="" class="generate_icon">
                </div>
            </div>
        </div>
        <div class="accpuncard_div">
            <p class="accpuncard_text">
                <span class="text_con">一个人只拥有此生此世是不够的，他还应该拥有 诗意的世界。111</span>
                <span class="name_con"> —— &nbsp;&nbsp;佚名1</span>
            </p>
            <p class="accpuncard_text">
                <span class="text_con">一个人只拥有此生此世是不够的，他还应该拥有 诗意的世界。222</span>
                <span class="name_con"> —— &nbsp;&nbsp;佚名2</span>
            </p>
            <p class="accpuncard_text">
                <span class="text_con">一个人只拥有此生此世是不够的，他还应该拥有 诗意的世界。333</span>
                <span class="name_con"> —— &nbsp;&nbsp;佚名3</span>
            </p>
        </div>
        <a href="javascript:void (0);" class="entrance_red">
            <img src="../res/daySignPosters-v2/images/entrance.png" alt="">
        </a>
    </div>
</div>
</body>
<script src="../res/js/jquery-1.11.1.min.js"></script>
<script src="../res/js/resize.js"></script>
<script src="../res/daySignPosters-v2/js/ObtainCurTime-v2.js"></script>
<script src="../res/js/swiperjs/swiper.min.js"></script>
<script>
    window.onload=function() {
        $(".slide_s").eq(0).addClass("active");
        $(".accpuncard_text").eq(0).addClass("selected");
    }
    $(function () {
        $(".closed").click(function () {
            $(".welfare_share").hide();
        })
    })
    $(function () {
        var mySwiper = new Swiper(".swiper-container", {
            slidesPerView: "auto",
            centeredSlides: !0,
            watchSlidesProgress: !0,
            pagination: ".swiper-pagination",
            paginationClickable: !0,
            spaceBetween: 35,
            onProgress: function (a) {
                var b, c, d;
                for (b = 0; b < a.slides.length; b++) c = a.slides[b], d = c.progress, scale = 1 - Math.min(Math.abs(.2 * d), 1), es = c.style,
                    es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform = "translate3d(0px,0," + -Math.abs(130 * d) + "px)"
            },
            onSetTransition: function (a, b) {
                for (var c = 0; c < a.slides.length; c++) es = a.slides[c].style, es.webkitTransitionDuration = es.MsTransitionDuration = es.msTransitionDuration = es.MozTransitionDuration = es.OTransitionDuration = es.transitionDuration = b + "ms"
                //当前的slide添加active类，其他的删除active类
                $(".slide_s").removeClass("active");
                $(".swiper-slide-active").addClass("active")
                //对应索引值的p标签添加selected类，其他的删除selected类
                $(".accpuncard_text").removeClass("selected");
                $(".accpuncard_text").eq(a.activeIndex).addClass("selected");
            },
        });
    })

</script>
</html>